<template>
  <div class="sign-up section-bg">
    <div class="sign-up__title">Comming Soon</div>
    <img src="/src/assets/img/chain.svg" class="sign-up__img" />
    <h1 class="text-center">Sign Up For Release News</h1>
    <p>First 500 email sign-ups will receive 3 months of complimentary DMD Pass for Free!</p>
    <div class="default-btn sign-up__default-btn">
      <img class="sign-up__mail-img" src="/src/assets/img/icon_mail.svg" />
      Sign up
    </div>
    <div class="sign-up__btn-container d-flex">
      <div class="sign-up-btn sig">
        <img src="/src/assets/img/icon_google.svg" />
      </div>
      <div class="sign-up-btn">
        <img src="/src/assets/img/icon_x.svg" />
      </div>
      <div class="sign-up-btn">
        <img src="/src/assets/img/icon_telegram.svg" />
      </div>
    </div>
  </div>
</template>

<script setup></script>

<style scoped>
.sign-up {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 190px 0 100px;
}
.sign-up__img {
  width: 292px;
  height: 292px;
}
.sign-up__title {
  text-align: center;
  font-size: 32px;
  font-weight: 700;
  color: #fff;
}
.sign-up h1 {
  font-size: 60px;
  font-weight: bold;
}
.sign-up p {
  font-size: 32px;
  letter-spacing: 4%;
  max-width: 50%;
  text-align: center;
}
.sign-up__default-btn {
  font-size: 32px;
  font-weight: 700;
  text-align: center;
  max-width: unset;
  padding: 26px 160px;
}
.sign-up__mail-img {
  display: inline-block;
  margin-right: 1.5rem;
}
.sign-up-btn {
  padding: 30px 64px;
  border-radius: 4px 0px 0px 0px;
  border: 1px solid rgb(255, 255, 255, 0.3);
  cursor: pointer;
}
.sign-up-btn:hover {
  border: 1px solid rgb(255, 255, 255, 0.5);
  transition: border 0.3s;
}
.sign-up-btn img {
  width: 30px;
  height: 30px;
}
.sign-up__btn-container {
  margin-top: 40px;
}
.sign-up-btn + .sign-up-btn {
  margin-left: 10px;
}
</style>
